<template>
  <div v-if="pageflag" class="display-flex fd-row jc-space-around ai-center">
    <div class="contetn_left-top-bg padding-20 display-flex ai-stretch">
      <span class="contetn_left-top-online"></span>
      <div class="display-flex fd-column jc-flex-end ai-fs">
        <span>在线设备</span>
        <div>
          <span class="line-number">{{ overviewData.online }}</span
          >台
        </div>
      </div>
    </div>
    <div class="contetn_left-top-bg padding-20 display-flex ai-stretch">
      <span class="contetn_left-top-offline"></span>
      <div class="display-flex fd-column jc-flex-end ai-fs">
        <span>离线设备</span>
        <div>
          <span class="line-number">{{ overviewData.offline }}</span
          >台
        </div>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 100px">
    重新获取
  </Reacquire>
</template>
<script>
export default {
  data() {
    return {
      pageflag: false,
      // 在线离线概览
      overviewData: {
        online: 0,
        offline: 0,
      },
    };
  },
  mounted() {
    this.getData(); // 在线离线概览
  },
  methods: {
    // 在线离线概览
    getData() {
      let res = {
        0: 57,
        1: 19,
      };
      this.pageflag = true;
      this.overviewData.online = res["1"];
      this.overviewData.offline = res["0"];
    },
  },
};
</script>
<style lang="scss" scoped>
.contetn_left-top-bg {
  width: 175px;
  height: 60px;
  line-height: 30px;
  // border: 1px solid red;
  background: url("~@/assets/images/iot/on_off_line_bg.png");
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: contain;
  .contetn_left-top-online {
    /*宽高相等*/
    height: 12px;
    width: 12px;
    /*设置圆角边框，尺寸为宽高的一半，就是正圆*/
    border-radius: 50%;
    /*背景色*/
    background-color: #4dbf4f;
    /*设置block才能显示出来*/
    display: inline-block;
    border: 3px solid #fff;
    margin-right: 10px;
  }
  .contetn_left-top-offline {
    /*宽高相等*/
    height: 12px;
    width: 12px;
    /*设置圆角边框，尺寸为宽高的一半，就是正圆*/
    border-radius: 50%;
    /*背景色*/
    background-color: #bababa;
    /*设置block才能显示出来*/
    display: inline-block;
    margin-right: 10px;
    border: 3px solid #fff;
  }
  .line-number {
    font-size: 28px;
    color: #efba55;
  }
}
</style>
